<template>
	 
		<!-- websocket 测试 -->
 	<div class="mod-config">
	    <el-form
	      :inline="true"
	      :model="dataForm"
	      @keyup.enter.native="getDataList()"
	    >
	      <el-form-item label="发送信息:">
	        <el-input
	          v-model="dataForm.sendText"
	          placeholder="发送信息"
	          clearable
	        ></el-input>
	      </el-form-item>
	      <el-form-item>
	        <el-button @click="send()">发送</el-button>
	      </el-form-item>

	      <el-form-item label="当前ws状态:">
	       
	        <span v-if="!websocket || websocket.readyState == null">未连接</span>
	        <span v-else-if="websocket.readyState == 0">
	        	正在建立连接连接
	        </span>
	        <span v-else-if="websocket.readyState == 1">
	        	连接正常
	        </span>
	        <span v-else-if="websocket.readyState == 2">
	        	正在关闭
	        </span>
	        <span v-else-if="websocket.readyState == 3">
	        	已关闭
	        </span>
	      </el-form-item>

	       <el-form-item  v-if="!websocket || !websocket.readyState || websocket.readyState != 1">
	       	 <el-button @click="initWs()">链接</el-button>
	       </el-form-item>

    </el-form>


    <div>
    	<!-- 接收到得信息 -->
    	 <el-input type="textarea"
	          v-model="receiveData"
	          placeholder="接收信息"
	          clearable
	        ></el-input>

    </div>

	</div>
</template>
<script>
import {getUUID,dateFormat} from '@/utils'
export default {
	data() {
		return {
			cid: '' , // 客户端随机ID
			websocket: null,
			dataForm: {
				sendText: '' 
			},
			receiveData: ''
			
		}
	},
	computed: {
		websocketReady() {
			if(!this.websocket) {
				return null
			}
			return this.websocket.readyState
		}
	},
	created(){
		this.cid = getUUID()
		this.initWs()
	},
	beforeDestroy() { 
 		if(this.websocket && this.websocketReady == 1) {
 			console.log('close')
 			this.webSocket.close();
 		}
 		this.webSocket = null
　　},   
	methods: {
		send() {
			if(!this.dataForm.sendText) {
				this.$message.error('信息为空')
				return
			}

			this.websocketsend(this.dataForm.sendText)

			this.dataForm.sendText = ''

		},
		initWs () {
           if ('WebSocket' in window) { 
              var url = this.$http.adornUrl('/websocket')
              url = url.replace('http' , 'ws')

              // 加上当前token信息
              const token = this.$cookie.get('token') 
 
              this.websocket = new WebSocket(url + '?token=' + token ); 
				console.log('websocket' , this.websocket)
            } 
            else { 
                alert('Sorry, websocket not supported by your browser.') 
            }
            //数据接收
            this.websocket.onmessage = this.websocketonmessage;
           
            this.websocket.onclose = this.websocketclose; 
                //this.websocket.close();
        },
        websocketonmessage(e){ //数据接收
            console.log('Client received a message',e.data);
          
           	const currDate = new Date();
            const dateStr = dateFormat(currDate , 'yyyy-MM-dd HH:mm:ss');
           	const info = dateStr + " : " + e.data + '\n' ;

            this.receiveData = this.receiveData +  info ;
        },
        websocketsend(agentData){//数据发送
            this.websocket.send(agentData);
        },
        websocketclose(e){  //关闭
            this.websocket.close();	
			this.websocket = null
            console.log("connection closed (" + e + ")");
        }
	}
}
</script>